<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>车辆监控</title>
    <link href="/css/style.css" type="text/css" rel="stylesheet">
    <link href="/css/monitor.css" type="text/css" rel="stylesheet">
    <link rel="stylesheet" href="/css/layui.css" media="all">

    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/style.js"></script>
    <script type="text/javascript" src="/js/echarts.min.js"></script>
    <!--[if lte IE 8]>
    <link rel="stylesheet" type="text/css" href="css/ie.css"/>
    <style></style>
    <![endif]-->
    <!--[if lte IE 9]>
    <script>alert("您正在使用的浏览器版本过低，为了您的最佳体验，请先升级浏览器。");
    window.location.href = "http://support.dmeng.net/upgrade-your-browser.html?referrer=" + encodeURIComponent(window.location.href);</script>
    <![endif]-->


    <style>
        body, html {
            height: 100%;
            min-width: 1600px;
            overflow: hidden;
        }

        ::-webkit-scrollbar {
            height: 10px;
            overflow: visible;
            width: 6px;
        }

        ::-webkit-scrollbar-corner {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background-color: #033b70;
            background-clip: padding-box;
            border: 1px solid #03437a;
            border-width: 1px;
            min-height: 28px;
            max-height: 100px;
            padding: 10px 0 0;
            box-shadow: inset 0 0 2px hsla(0, 0%, 100%, .25);
        }

        .header .layui-nav {
            position: absolute;
            right: 0;
            top: 0;
            padding: 0;
            background: none;
        }
    </style>
    <script>
        function getTime() {
            var mydate = new Date();
            var myddy = mydate.getDay();
            var time = format(mydate);
            var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
            $(".showDate").html(time + '&nbsp;&nbsp;' + weekday[myddy]); //将值赋给div
        }

        $(function () {
            setInterval("getTime();", 1000);
            setTimeout(function () {
                setInterval("carHistory();", 5000);
            }, 2000);
            setTimeout(function () {
                setInterval("pieChartData();", 5000);
            }, 3000);
        });

        function reload() {
            window.location.reload();
        }
    </script>
</head>

<body style="background:#050e32;">

<div class="header">
    <em id="showDate"><img src="/images/time_icon.png"><a style="color:#2c9eff;"
                                                                             class="showDate"></a></em>
    <div class="wrap"><p>山东威尔数据股份有限公司安全化智能云平台 &nbsp;&mdash;&nbsp; 车辆监控</p></div>
</div>

<div class="botm botm_car">

    <div class="box botm_cen">
        <div class="btm_space"></div>
        <div class="btm_cont">
            <div class="cont_lt"><img src="/images/perng_lt_icon.png"></div>
            <div class="cont_rt"><img src="/images/perng_rt_icon.png"></div>
            <div class="cont_lb"><img src="/images/perng_lb_icon.png"></div>
            <div class="cont_rb"><img src="/images/perng_rb_icon.png"></div>
            <div class="cont_title">当前车辆监控信息</div>
            <div class="art_box" style="overflow: hidden;height: 800px;">
                <div class="now_top">
                    <div class="che_pic lf">
                        <img class="vehicleimgpath" src="/images/12345car.png" alt=""
                             onerror="carImgerror(this);"/>
                    </div>
                    <div class="person_img"
                         style=" float:right; height:79%;width:39%; margin-top:6px;  margin-right: 2%; position:relative;">

                        <div class="per_img lf"><img src="http://120.79.234.251//resource/xcz/20200515/1516570310020200515160950-31239839752.jpg" alt=""
                                                     onerror="imgerrornull(this)"/></div>
                        <div class="per_img lf"><img src="http://120.79.234.251//resource/xcz/20200515/1516570310020200515160950-31239839752.jpg" alt=""
                                                     onerror="imgerrornull(this)"/></div>
                        <img src="/images/lxn-youer.png" alt=""/>
                    </div>

                </div>
                <div class="now_btm">
                    <div class="mes_box">
                        <h2><a href="#" class="a_act">个人信息</a></h2>
                        <div class="h2_box">
                            <table width="100%" border="0">
                                <tbody>
                                <tr>
                                    <td width="10%"><p>姓名</p><h5 class="name">&nbsp;</h5></td>
                                    <td width="8%"><p>民族</p><h5 class="nation">&nbsp;</h5>
                                    </td>
                                    <td width="12%"><p>车牌号</p><h5 class="clcph">&nbsp;</h5>
                                    </td>
                                    <td><p>身份证号</p><h5 class="idcard">&nbsp;</h5>
                                    </td>
                                    <td><p>时间</p><h5 class="hlsj">&nbsp;
                                    </h5></td>

                                    <td><p>常出没地</p><h5 class="hsbc"></h5></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="befo_box">
                        <div class="slide_cont">
                            <input type="hidden" id="car_card" value="">
                            <ul id="carcheck_list">
                            </ul>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="box botm_rt">
        <div class="btm_space"></div>
        <div class="btm_cont lit">
            <div class="cont_lt"><img src="/images/perng_lt_icon.png"></div>
            <div class="cont_rt"><img src="/images/perng_rt_icon.png"></div>
            <div class="cont_lb"><img src="/images/perng_lb_icon.png"></div>
            <div class="cont_rb"><img src="/images/perng_rb_icon.png"></div>
            <div class="cont_title">今日访问分类</div>
            <div class="art_box" style="overflow: hidden;">
                <ul class="fwfl_top">
                    <li><h3 class="minitorys">12<em>个</em></h3>
                        <p>非车主</p></li>
                    <li><h3 class="alarmsNum">5<em>个</em></h3>
                        <p>预警</p></li>
                    <li><h3 class="employeeNum">80<em>个</em></h3>
                        <p>内部车辆</p></li>
                    <li><h3 class="visitorsNum">30<em>个</em></h3>
                        <p>外部车辆</p></li>
                </ul>
                <div class="fwfl_btm" id="car_circle">

                </div>

            </div>
        </div>
        <div class="btm_space"></div>
        <div class="btm_cont big">
            <div class="cont_more"><a onclick="carList();" href="javascript:;">更多&gt;&gt;</a></div>
            <div class="cont_lt"><img src="/images/perng_lt_icon.png"></div>
            <div class="cont_rt"><img src="/images/perng_rt_icon.png"></div>
            <div class="cont_lb"><img src="/images/perng_lb_icon.png"></div>
            <div class="cont_rb"><img src="/images/perng_rb_icon.png"></div>
            <div class="cont_title">车辆历史记录</div>
            <div class="art_box" style="height: 800px;">
                <table width="100%" border="0" class="tab_list">
                    <tbody id="history_list">

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script type="text/javascript" src="/js/layui.js"></script>

<script type="text/javascript">
    layui.use(['table', 'element', 'layer', 'laydate', 'util'], function () {

        var $ = layui.jquery, layer = layui.layer, element = layui.element; //独立版的layer无需执行这一句

    });

    function carList() {
        var beginDate = '';
        $(".time").each(function () {
            beginDate = $(this).html();
            if (beginDate != '') {
                beginDate = beginDate.substring(0, 10)
                location.href = "/crm/account/main?ifarmUrl=carInformation/VehicleVerificationQuery/listData?beginDate=" + beginDate + "&endDate" + beginDate;
            }
        });
    }

    $(function () {
        //车辆历史记录
        carHistory();
        //车辆轨迹
        carline();
        //访问分类初始化
        //饼状图
        pieChartData();
    })

    //车辆历史记录
    function carHistory() {
        //$("#history_list").empty();
        var str = '<tr>' +
            '<td><span><img src="http://120.79.234.251//resource/xcz/20200515/1516570310020200515160950-31239839752.jpg" onerror="imgerror(this);"></span></td>' +
            '<td>' + "鲁F123456" + '</td>' +
            '<td>' + "黑金卡" + '</td>' +
            '<td class="is_pass" style="display:none;">' + "通过" + '</td>' +
            '<td class="time">' + "2020-06-03 12:30:56" + '</td>' +
            '</tr>';
        $("#history_list").append(str);
    }

    //车辆轨迹
    function carline() {
        var str = '<li>' +
            '<div class="wz"><span><img src="/images/12345car.png" onerror="carImgerror(this);"></span></div>' +
            '<h6><em></em></h6>' +
            '<div class="wz">' +
            '	<h2>' + "山东烟台市" + '</h2>' +
            '	<p>' + "2013-03-05 12:02:45" + '</p>' +
            '</div></li>';
        $("#carcheck_list").append(str);
        $("#carcheck_list").append(str);
        $("#carcheck_list").append(str);
        $("#carcheck_list").append(str);
        $("#carcheck_list").append(str);
        $("#carcheck_list").append(str);
        $("#carcheck_list").append(str);
        $("#carcheck_list").append(str);
        $("#carcheck_list").after('<span class="pre_btn"><img src="/images/_arrow_lf.png"></span><span class="next_btn"><img src="/images/_arrow_rt.png"></span>');
        preOrNext();
    }

    //饼状图（今日访问分类）
    function pieChartData() {
        var myChart = echarts.init(document.getElementById('car_circle'));
        option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {

                orient: 'vertical',
                top: "middle",
                right: "15%",
                data: ['非车主', '预警', '内部车辆', '外部车辆'],
                textStyle: {
                    color: "#027ab7"
                },

            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['60%', '80%'],
                    center: ['40%', '48%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colorList = [
                                    '#00a1e4', '#ffd900', '#24c768', '#ff7e00'
                                ];
                                return colorList[params.dataIndex]
                            },
                            label: {
                                show: true,
                                position: 'top',
                                formatter: '{c}个'
                            }

                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        {value: 12, name: '非车主'},
                        {value: 9, name: '预警'},
                        {value: 80, name: '内部车辆'},
                        {value: 30, name: '外部车辆'}
                    ]
                }
            ]
        };
        myChart.setOption(option);




       /* $.ajax({
            url: '/crm/inspect/vehicleVerificationRecords/totalClassRedis',
            type: "POST",
            dataType: 'json',
            async: false,
            data: {},
            success: function (data) {
                var map = data.nowDayRecords;
                $(".minitorys").html(map.minitorys + "<em>个</em>");
                $(".employeeNum").html(map.employeeNum + "<em>个</em>");
                $(".alarmsNum").html(map.alarmsNum + "<em>个</em>");
                $(".visitorsNum").html(map.visitorsNum + "<em>个</em>");

            },
            error: function (data) {
                // alert("请求失败");
            }
        });*/
    }

    function imgerror(img) {
        img.src = "/images/lxn-boxImg.png";
        img.onerror = null;
    }

    function carImgerror(img) {
        img.src = "/images/12345car.png"
        img.onerror = null;
    }

    function imgerrornull(img) {
        $(img).remove();
    }

    function format(date) {
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hour = date.getHours();
        var min = date.getMinutes();
        var sec = date.getSeconds();
        if (month < 10) month = "0" + month;
        if (day < 10) day = "0" + day;
        if (hour < 10) hour = "0" + hour;
        if (min < 10) min = "0" + min;
        if (sec < 10) sec = "0" + sec;
        return (year + '-' + month + '-' + day + " " + hour + ":" + min + ":" + sec);
    }

    function preOrNext() {
        var bh = $(window).height();
        var Hg = $(".header").height();
        $(".botm").height(bh - Hg);
        $(".botm .box .btm_cont").each(function (i) {
            var btH = $(this).height();
            $(this).children(".art_box").height(btH - 50);
        });
        var liH = $(".art_box .fwfl_top li").height();
        $(".art_box .fwfl_top li").children("h3").css({
            "line-height": 0.3 * liH + "px",
            "margin-top": 0.2 * liH + "px"
        });
        $(".art_box .fwfl_top li").children("p").css({
            "line-height": 0.3 * liH + "px",
            "margin-bottom": 0.2 * liH + "px"
        });
        var heH = $(".art_box .now_top h4").height();
        $(".art_box .now_top h4").css("line-height", heH + "px");
        var mesH = $(".art_box .now_btm .mes_box").height();
        $(".now_btm .mes_box .h2_box").css("height", mesH - 47);
        var liW = $(".befo_box .slide_cont").width();
        $(".befo_box .slide_cont li").css({"width": 0.333 * liW + "px"});
        $(".botm_car .befo_box .slide_cont li").css({"width": 0.2 * liW + "px"});
        var ssh = $(".befo_box .slide_cont li").width();
        var len = liW / ssh;
        var li_shu = $(".slide_cont li").length;
        if (li_shu > len) {
            $(".befo_box .next_btn,.befo_box .pre_btn").show();
        } else {
            $(".befo_box .next_btn,.befo_box .pre_btn").hide();
        }
        var lf0 = liW - li_shu * ssh;
        var num = 0;
        $(".next_btn").click(function () {
            num++;
            var sss = ssh * num;
            if (num >= li_shu - len) {
                num = li_shu - len;
                $(".slide_cont ul").stop().animate({marginLeft: lf0}, 600);
            } else {
                $(".slide_cont ul").stop().animate({marginLeft: -sss}, 600);
            }
        });

        $(".pre_btn").click(function () {
            num--;
            var sss = ssh * num;
            if (num <= 0) {
                num = 0;
                $(".slide_cont ul").stop().animate({marginLeft: 0}, 600);
            } else {
                $(".slide_cont ul").stop().animate({marginLeft: -sss}, 600);
            }
        });
    }
</script>
</body>
</html>
